<!DOCTYPE html>
<html lang="zh-CN">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="description" content="">
  <meta name="keywords" content="">
  
    <link rel="icon" href="/avatar.jpg">
  
    
  <title>npm5中本地间模块引用的最好方式（附带引用方法总结） | 科学君的不科学博客</title>
  <link rel="stylesheet" href="/style.css">
  <link rel="stylesheet" href="/lib/jquery.fancybox.min.css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script type="text/javascript" src="https://tajs.qq.com/stats?sId=65546304" charset="UTF-8"></script>
  <script>
  (function(){
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      if (curProtocol === 'https') {
          bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
      }
      else {
          bp.src = 'http://push.zhanzhang.baidu.com/push.js';
      }
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
  })();
  </script>
</head>

<body>
  <header>
  <div class="header-container">
    <a class='logo' href="/">
      <span>科学君的不科学博客</span>
    </a>
    <ul class="right-header">
      
        <li class="nav-item">
          
            <a href="/" class="item-link">首页</a>
          
        </li>
      
        <li class="nav-item">
          
            <a href="/about" class="item-link">关于</a>
          
        </li>
      
        <li class="nav-item">
          
            <a href="/archives" class="item-link">归档</a>
          
        </li>
      
        <li class="nav-item">
          
            <a href="/tags" class="item-link">标签</a>
          
        </li>
      
        <li class="nav-item">
          
            <a href="/atom.xml" class="item-link">FEED 订阅</a>
          
        </li>
      
    </ul>
  </div>
</header>

  <main id='post'>
  <div class="content">
    <article>
      <section class="content markdown-body">
        <h1>npm5中本地间模块引用的最好方式（附带引用方法总结）</h1>
        <div class='post-meta'>
          <i class="fa fa-calendar" aria-hidden="true"></i>
          <time>2018年04月24日</time>
          
          | <i class="fa fa-folder-open-o" aria-hidden="true"></i> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/blog/">blog</a>
  </div>



          
          
          |
          
          <i class="fa fa-tags" aria-hidden="true"></i>
          
          
  <a href="/tags/#前端" class='tag'>前端</a>

  <a href="/tags/#npm" class='tag'>npm</a>


          
        </div>
        <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>对于某些比较大的项目，我们可能会希望将其划分成多个模块：</p>
<ul>
<li>module1<ul>
<li>package.json</li>
<li>libs<ul>
<li>file1.js</li>
</ul>
</li>
</ul>
</li>
<li>module2<ul>
<li>package.json</li>
<li>index.js</li>
</ul>
</li>
</ul>
<p>假如我们要在 <code>module2/index.js</code> 中直接引用 <code>file1.js</code>，可能就会写成这样 <code>require(&#39;../module1/libs/file1&#39;)</code>。这样写并不好，因为：</p>
<ol>
<li>有时候引用方的文件处在很深的路径下，那么引用地址就得写成 <code>../../../module1/libs/file1</code>，体验很不好。</li>
<li>既然我们将项目划分成了多个模块，肯定是想要降低模块之间的偶合度。这样直接引用文件的做法相当于直接深入到了模块的内部，没有将模块之间隔离出来，低耦合更无从谈起了。</li>
</ol>
<p>解决2号问题最好的做法是提供一个单独的文件作为模块的接口。</p>
<p>比如上文的文件结构，我们可以变成这样：</p>
<ul>
<li>module1<ul>
<li>package.json</li>
<li>index.js</li>
<li>libs<ul>
<li>file1.js</li>
</ul>
</li>
</ul>
</li>
<li>module2<ul>
<li>package.json</li>
<li>index.js</li>
</ul>
</li>
</ul>
<p>在 <code>module1/index.js</code> 中把我们希望在本模块中暴露出来的函数或类export出来，这样的话就相当于给模块提供了一个接口。其他模块只能通过 index.js 提供的内容来访问。假如以后需要重构 module1，将 file1.js 拆成两个文件，只需要改动一下 <code>module1/index.js</code>即可，不需要修改其他的模块。</p>
<p>现在我们的引用可以写成 <code>require(&#39;../module1&#39;)</code> 了，本文章的剩余内容就来讨论一下怎样解决1号问题——去掉前面的<code>..</code>。</p>
<h2 id="1-使用-npm-install-module1"><a href="#1-使用-npm-install-module1" class="headerlink" title="1. 使用 npm install ../module1"></a>1. 使用 <code>npm install ../module1</code></h2><p>我们可以把 module1 作为依赖安装给 module2。这样的话，module2在运行的时候就可以把 module1 当成一个普通的依赖，使用 <code>require(&#39;module1&#39;)</code> 来引入了。这个方法的问题在于要安装的module1必须在package.json文件中有version字段，否则无法安装成功。对于一个应用程序（而不是类库）而言，每次修改都需要更新版本还是太麻烦了。而且npm5的安装会直接创建一个软链接，会引发更多的问题（我下文要说）。</p>
<h2 id="2-直接修改-package-json-字段，增加依赖"><a href="#2-直接修改-package-json-字段，增加依赖" class="headerlink" title="2. 直接修改 package.json 字段，增加依赖"></a>2. 直接修改 package.json 字段，增加依赖</h2><p>这种方法也很有意思。我们可以直接在 <code>module2/package.json</code> 的 dependencies 中增加一个 <code>&quot;module1&quot;: &quot;file:../module1&quot;</code> 。这样npm5在安装依赖的时候会自动创建相应的软链接，自动给module1安装依赖，而且不需要版本号。但这个特性跟npm5的package-lock结合起来就出问题了。</p>
<p>对于进行过这些修改的module2，在安装依赖的时候会把 module1 的 package-lock 也合并进 <code>module2/package-lock.json</code>，再一次使用 <code>npm install</code> 的时候就会提示 <code>enoent ENOENT: no such file or directory</code>。我也不知道这是为什么。不过npm5已经准备<a href="https://github.com/npm/npm/pull/15900" target="_blank" rel="noopener">放弃直接安装文件夹的功能而改用 npm link</a>了，这些问题以后肯定也不会修复了。 </p>
<h2 id="3-使用-install-local"><a href="#3-使用-install-local" class="headerlink" title="3. 使用 install-local"></a>3. 使用 <a href="https://www.npmjs.com/package/install-local" target="_blank" rel="noopener">install-local</a></h2><p>这玩意跟解决方法1类似，只不过在npm5里面也能直接拷贝文件夹而不是创建软链接。这么做的话还是需要version字段，而且对于module1的改动不会直接反应到module2上，还需要像更新其他模块那样手动更新。</p>
<h2 id="4-使用-npm-link"><a href="#4-使用-npm-link" class="headerlink" title="4. 使用 npm link"></a>4. 使用 npm link</h2><p>这个比较神奇。我们可以在module1目录下运行 <code>npm link</code>，然后在<code>module2</code>目录下运行<code>npm link module1</code>。这样的话，npm就会自动在module2的node_modules目录下创建一个软链接，我们拥有了类似于方法2的效果，并且不会修改 package-lock。</p>
<p>但是它也不会修改 package.json。也就是说我们拿到项目源代码之后不能直接用 npm i 来安装所有依赖，还必须得加一步 npm link 才行，还是太麻烦了。</p>
<h2 id="5-使用-require-rewrite"><a href="#5-使用-require-rewrite" class="headerlink" title="5. 使用 require-rewrite"></a>5. 使用 <a href="https://www.npmjs.com/package/require-rewrite" target="_blank" rel="noopener">require-rewrite</a></h2><p>这个方法解决了上述的所有问题。我们只需要配置一下module2的package.json，加入module1的路径，这样就能使用<code>require(&#39;module1&#39;)</code>来引入模块了。</p>
<p>不过，这个方法又引入了两个新的问题：</p>
<ol>
<li>引入的时候得多写一步。我们必须要在 <code>require(&#39;module1&#39;)</code> 前面写上 <code>require(&#39;require-rewrite&#39;)(__dirname)</code> 才能在本文件中引入此模块。</li>
<li>静态代码分析失效了。如果你用 webstorm 的话，它显然是没法通过重写过的路径来找到module1的实际路径的，那基于此的代码补全也就失效了。</li>
</ol>
<h2 id="6-使用-postinstall-钩子手动创建软链接"><a href="#6-使用-postinstall-钩子手动创建软链接" class="headerlink" title="6. 使用 postinstall 钩子手动创建软链接"></a>6. 使用 postinstall 钩子手动创建软链接</h2><p>我个人比较推荐这种做法。</p>
<p>我们可以在module2的package.json的script字段中新建一个：<br><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">"postinstall": "node -e \"var s='../module1',d='./node_modules/module1',fs=require('fs'), r=require('path').resolve;fs.exists(d,function(e)&#123;e||fs.symlinkSync(r(s),r(d),'junction')&#125;);\""</span><br></pre></td></tr></table></figure></p>
<p>它的命令名称为 postinstall，使得这个命令会在 npm install 安装结束之后自动执行。它执行一段node脚本来自动创建链接，起到了跟npm link相似的效果。只要把其中的 module1 更换成你自己的模块路径即可。注意其中的 <code>junction</code>，这个参数只在 windows 下才有效果，*Unix 下这个参数是什么都没有关系。junction代表创建目录链接。</p>
<p>其实这个解决办法还是有两个小问题，不过对于我而言还能接受。</p>
<h3 id="不会自动安装依赖的依赖"><a href="#不会自动安装依赖的依赖" class="headerlink" title="不会自动安装依赖的依赖"></a>不会自动安装依赖的依赖</h3><p>在 module2 下执行 npm install 并不会自动给 module1 安装依赖。</p>
<h3 id="在-root-权限下执行会有问题"><a href="#在-root-权限下执行会有问题" class="headerlink" title="在 root 权限下执行会有问题"></a>在 root 权限下执行会有问题</h3><p>默认情况下，在 root 权限下执行 npm install 会阻止 postinstall 脚本运行。我们可以使用普通权限来安装或者使用 <code>npm install --unsafe-perm</code> 来安装。</p>
<h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><ul>
<li><a href="https://juejin.im/post/5ab3f77df265da2392364341" target="_blank" rel="noopener">https://juejin.im/post/5ab3f77df265da2392364341</a></li>
<li><a href="https://github.com/npm/npm/issues/3497" target="_blank" rel="noopener">https://github.com/npm/npm/issues/3497</a></li>
<li><a href="https://github.com/SamHwang1990/blog/issues/5" target="_blank" rel="noopener">https://github.com/SamHwang1990/blog/issues/5</a></li>
</ul>

      </section>
      <div class="license">
        <a href="http://creativecommons.org/licenses/by-sa/3.0/" rel="license" target="_blank">
          <img src="http://i.creativecommons.org/l/by-sa/3.0/88x31.png" style="border-width:0"
               alt="Creative Commons License" class="center">
        </a>
      </div>
      <p>
        本作品采用
        <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" target="_blank">
          署名-相同方式共享 4.0 国际
        </a>
        进行许可。欢迎转载、使用、重新发布，但务必保留文章署名
        “不科学的科学君” (Liu233w) 与博客链接：
        <a href="https://liu233w.github.io">https://liu233w.github.io</a>
        ，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请
        <a href="mailto:wwwlsmcom@outlook.com" target="_blank">与我联系</a>
        。
      </p>
    </article>
    
    <!-- disqus 评论框 start -->
    <div class="comment">
      <div id="disqus_thread" class="disqus-thread">
        <i>加载评论框需要翻墙</i>
      </div>
    </div>
    <!-- disqus 评论框 end -->
    
    
    <!-- livere 评论框 start -->
    <div class="comment">
      <div id="lv-container" data-id="city" data-uid="MTAyMC8zNTE5NS8xMTczMA=="></div>
    </div>
    <!-- livere 评论框 end -->
    
  </div>
  <aside>
    
    <div class="toc-container">
      <h1>目录</h1>
      <div class="content">
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#前言"><span class="toc-number">1.</span> <span class="toc-text">前言</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-使用-npm-install-module1"><span class="toc-number">2.</span> <span class="toc-text">1. 使用 npm install ../module1</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-直接修改-package-json-字段，增加依赖"><span class="toc-number">3.</span> <span class="toc-text">2. 直接修改 package.json 字段，增加依赖</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-使用-install-local"><span class="toc-number">4.</span> <span class="toc-text">3. 使用 install-local</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-使用-npm-link"><span class="toc-number">5.</span> <span class="toc-text">4. 使用 npm link</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-使用-require-rewrite"><span class="toc-number">6.</span> <span class="toc-text">5. 使用 require-rewrite</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-使用-postinstall-钩子手动创建软链接"><span class="toc-number">7.</span> <span class="toc-text">6. 使用 postinstall 钩子手动创建软链接</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#不会自动安装依赖的依赖"><span class="toc-number">7.1.</span> <span class="toc-text">不会自动安装依赖的依赖</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#在-root-权限下执行会有问题"><span class="toc-number">7.2.</span> <span class="toc-text">在 root 权限下执行会有问题</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#参考资料"><span class="toc-number">8.</span> <span class="toc-text">参考资料</span></a></li></ol>
      </div>
    </div>
    
  </aside>
</main>

<!-- disqus 公共JS代码 -->
<script type="text/javascript">
  /* * * CONFIGURATION VARIABLES * * */
  var disqus_shortname = "liu233w";
  var disqus_identifier = "https://liu233w.github.io/2018/04/24/npm5-install-folder-link/";
  var disqus_url = "https://liu233w.github.io/2018/04/24/npm5-install-folder-link/";

  isAgent(getDisqus)

  // determine user agent in China
  function isAgent(cb) {
    var url = '//graph.facebook.com/feed?callback=h';
    var xhr = new XMLHttpRequest();
    var called = false;
    xhr.open('GET', url);
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        called = true;
        cb(true);
      }
    };
    xhr.send();
    // timeout 1s, this facebook API is very fast.
    setTimeout(function () {
      if (!called) {
        xhr.abort();
        cb(false)
      }
    }, 1000);
  }

  function getDisqus(isAgent) {
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq)
  }
</script>
<!-- disqus 公共JS代码 end -->


<script type="text/javascript">
  (function (d, s) {
    var j, e = d.getElementsByTagName(s)[0];

    if (typeof LivereTower === 'function') {
      return;
    }

    j = d.createElement(s);
    j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
    j.async = true;

    e.parentNode.insertBefore(j, e);
  })(document, 'script');
</script>


  <footer>
  <div class="copyright">
    <div>
      &copy; 2019 | Powered by <a href="https://hexo.io" target="_blank">Hexo</a>&nbsp
    </div>
    <div>
      Theme by <a href="https://github.com/lewis-geek/hexo-theme-Aath" target="_blank">Aath</a>
    </div>
  </div>
</footer>


<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="/lib/in-view.min.js"></script>
<script src="/lib/lodash.min.js"></script>
<script>
  var isDown = true
  var oldY = 0
  inView.offset(50)

  document.body.addEventListener('touchstart', function(){});
  
  window.addEventListener('scroll', _.throttle(e => {
    var currentY = window.scrollY
    if((oldY - currentY) < 0) {
      isDown = true
    } else {
      isDown = false
    }
    oldY = currentY
  }, 250))

  $("article img").each(function() {
      var strA = "<a data-fancybox='gallery' href='" + this.src + "'></a>";
      $(this).wrapAll(strA);
  });

  $('.toc-link').each(function() {
      var href = $(this).attr("href");
      
      inView(href).on('exit', () => {
        if (isDown) {
          handleActive(href)
        }
      })

      inView(href).on('enter', () => {
        if (!isDown) {
          handleActive(href)
        }
      })

      this.onclick = function(e) {
        var pos = $(href).offset().top - 10;
        $("html,body").animate({scrollTop: pos}, 300);
        setTimeout(() => {
          handleActive(href)
        }, 350)
        return false
      }
  })

  function handleActive(href) {
    document.querySelectorAll('.toc-link').forEach(elm => {
      elm.classList.remove('active')
    })
    document.querySelector(".toc [href='"+ href +"']").classList.add('active')
  }
</script>
<script src="/lib/jquery.fancybox.min.js"></script>

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

</body>
</html>
